
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';


import ListSubheader from '@material-ui/core/ListSubheader';
import Collapse from '@material-ui/core/Collapse';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import StarBorder from '@material-ui/icons/StarBorder';

import { createHashHistory } from 'history'; // 如果是hash路由
const useStyles = makeStyles(theme => ({
    root: {
        width: '100%',
        backgroundColor: theme.palette.background.paper,
    },
    nested: {
        paddingLeft: theme.spacing(4),
    },
}));
const history = createHashHistory();

export default function MenuList() {
    const classes = useStyles();
    const [opens, setOpens] = React.useState([
        false,
        false,
    ]);


    function handleClick(index) {
        var _opens = opens;
        _opens[index] = !_opens[index];
        setOpens([..._opens]);
    }
    function changeRoute(path) {
        history.push(path);
    }
    return (
        <React.Fragment>
            <List>
                <ListItem button onClick={handleClick.bind(null,0)}>
                    <ListItemIcon>
                        <InboxIcon />
                    </ListItemIcon>
                    <ListItemText primary="居民管理" />
                    {opens[0] ? <ExpandLess /> : <ExpandMore />}
                </ListItem>
                <Collapse in={opens[0]} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                        <ListItem button className={classes.nested} onClick={changeRoute.bind(null,'/DeviceManage')}>
                            <ListItemIcon>
                                <StarBorder />
                            </ListItemIcon>
                            <ListItemText primary="设备管理" />
                        </ListItem>
                        <ListItem button className={classes.nested} onClick={changeRoute.bind(null,'/FeedbackManage')}>
                            <ListItemIcon>
                                <StarBorder />
                            </ListItemIcon>
                            <ListItemText primary="意见反馈管理" />
                        </ListItem>
                    </List>
                </Collapse>
                <ListItem button onClick={handleClick.bind(null,1)}>
                    <ListItemIcon>
                        <InboxIcon />
                    </ListItemIcon>
                    <ListItemText primary="信息管理" />
                    {opens[1] ? <ExpandLess /> : <ExpandMore />}
                </ListItem>
                <Collapse in={opens[1]} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                        <ListItem button className={classes.nested} onClick={changeRoute.bind(null,'/PropertyMessageManage')}>
                            <ListItemIcon>
                                <StarBorder />
                            </ListItemIcon>
                            <ListItemText primary="物业通知管理" />
                        </ListItem>
                        <ListItem button className={classes.nested} onClick={changeRoute.bind(null,'/BusinessMessageManage')}>
                            <ListItemIcon>
                                <StarBorder />
                            </ListItemIcon>
                            <ListItemText primary="商业活动管理" />
                        </ListItem>
                    </List>
                </Collapse>
                <ListItem button onClick={changeRoute.bind(null,'/ChangePassword')}>
                    <ListItemIcon>
                        <InboxIcon />
                    </ListItemIcon>
                    <ListItemText primary="修改密码" />
                </ListItem>
            </List>
        </React.Fragment>
    )
};
